<template>
    <div class="container">
        <!-- 导航栏 -->
        <van-nav-bar   fixed=true  placeholder=true title="详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-notice-bar scrollable :text="this.goods.title" />
        <van-divider />
        <!-- 租金押金 -->
        <van-row class="price-style">
            <van-col span="8">租金:¥ {{ goods.price }}/天</van-col>
            <van-col span="16">押金:¥ {{ goods.guarentee }}</van-col>
        </van-row>
        <!-- 商品描述 -->
        <van-cell v-bind:value=goods.description />
        <!-- 商品图片 -->
        <div>
            <ul v-for="(url, index) in goods.imageUrls" :key="index">
                <van-image width="20rem" height="20rem" :src="url" />
            </ul>
        </div>

        <div v-if="buyPermitted">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="聊一聊" @click="onClickChat" />
                <van-goods-action-button text="立即租赁" type="danger" @click="onClickButton" />
            </van-goods-action>
        </div>
        <div v-if="editPermitted">
            <van-goods-action v-if="this.goods.status == 1">
                <van-goods-action-button type="warning" text="编辑" @click="edit" />
                <van-goods-action-button type="danger" text="下架" @click="pull" @submit.once="check"
                    v-bind:loading="showLoading" />
            </van-goods-action>
            <van-goods-action v-else-if="this.goods.status != 1">
                <van-goods-action-button type="danger" text="已下架" disabled />
            </van-goods-action>
        </div>


    </div>


</template>
<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            buyerId: 0,
            buyPermitted: true,
            editPermitted: false,
            isLogin: false,
            showLoading: false,

            goods: {
                id: 0,
                title: "",
                description: "",
                price: 0,
                guarentee: 0,
                createrId: 0,
                imageUrls: [],
                status: 0
            },
        }
    },
    methods: {
        //下架商品,更新商品状态
        pull() {
            this.showLoading = true
            this.axios({
                method: "patch",
                url: "/aapi/update_pro",
                data: {
                    id: this.goods.id,
                    status: 2
                }
            }).then(res => {
                console.log(res)
                this.showLoading = false
                this.$router.go(-1)
            }).error(() => {
                Toast.fail("网络错误请重试")
                this.showLoading = false
            })
        },
        edit() {
            this.$store.commit("toUpdatePrice",this.goods.price)
            this.$store.commit("toUpdateGuarentee",this.goods.guarentee)
            this.$router.push("/updateGoods")
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        onClickChat() {
            if (this.isLogin) {
                this.$store.commit("fromid", this.buyerId)
            this.$store.commit("toid", this.goods.createrId)
            this.axios({
                method: "GET",
                url: "/aapi/user",
                params: {id: this.goods.createrId} 
            }).then(response => {
                this.$store.commit("toname", response.data.username)
            })
            this.$router.push("/d")
            } else {
                Toast.fail("请先登录")
            }
        },
        onClickButton() {
            if (this.isLogin) {
                this.$router.push("/ordersubmit")
            } else {
                Toast.fail("请先登录")
            }
            /* //获取买家信息
            this.axios({
                method: "GET",
                url: "/aapi/me"
            }).then(response => {
                console.log(response)
                this.$router.push("/ordersubmit")
            }).catch(error => {
                if (error.response.status == 401)
                    Toast.fail("请先登录")
            }) */
        },
        init() {
            //获取买家信息
            this.axios({
                method: "GET",
                url: "/aapi/me"
            }).then(response => {
                console.log(response)
                this.isLogin = true
                this.buyerId = response.data.uid


            }).catch(error => {
                if (error.response.status == 401)
                    this.isLogin = false;
            }).finally(() => {
                this.axios({
                    method: "get",
                    url: "/aapi/goods",
                    params: {
                        id: this.$store.state.productId,
                    }
                }).then(response => {
                    this.goods.id = response.data.id
                    this.goods.title = response.data.title
                    this.goods.description = response.data.description
                    this.goods.price = response.data.price
                    this.goods.guarentee = response.data.guarentee
                    this.goods.createrId = response.data.createrId
                    this.goods.imageUrls = response.data.imageUrls
                    this.goods.status = response.data.status
                    //判断买家卖家是不是同一人
                    if (this.goods.createrId == this.buyerId) {
                        this.buyPermitted = false
                        this.editPermitted = true
                    }
                    console.log(this.editPermitted)
                })

            }

            )


        }
    },
    created() {
        this.init();
    },

}
</script>
<style>
.container {
    height: 100%;
}

.nav-bar {
    height: 100%;
}

.price-style {
    color: brown;
    font-size: 1.2rem;
}
</style>